import { Component } from "react";
import { ScrollView } from '@tarojs/components';
import i18n from 'i18n-js';
import { norInject, INorInjectProps } from "@/models";
import PageContainer from "@/components/PageContainer";
import { observer } from 'mobx-react';
import ListItem from '@/components/ListItem';
import { isGPRS, isNB, getItemForPk, IProduct } from '@/config/product';
import {
  GStyleSheet,
} from '@/utils/DarkMode';
import { DeviceDetail_Store_Key } from '@/models/deviceDetail'
import { getAiDeviceVersion } from "@/services/ai";


const dstyles = GStyleSheet.create({
  scroll: {
    flex: 1,
    padding: "0px 16px 0px",
    boxSizing:'border-box',
    borderTop: '1rpx solid #F0F0F0',
    backgroundColor: '#fff'
  },
  item: {
    borderBottom: '1rpx solid #F0F0F0',
    padding: '15px 0px'
  }
});


@norInject(DeviceDetail_Store_Key)
@observer
export default class DeviceInfoPage extends Component<INorInjectProps> {

  config: IProduct;
  state = {
    hardVersion: '',
    softVersion: '',
  }

  constructor(props: any) {
    super(props);
    const { deviceDetail } = props;
    this.config = deviceDetail?.productConfig || getItemForPk(deviceDetail?.device.productKey);
  }

  async componentDidMount(): void {
    const { deviceDetail } = this.props;
    const { id } = deviceDetail?.device;
    const data = await getAiDeviceVersion({ id })
    if (data.success) {
      this.setState({
        hardVersion: data.data.hard_version,
        softVersion: data.data.soft_version,
      })
    }
  }

  getDevice = () => {
    const { deviceDetail } = this.props;
    return deviceDetail?.device
  }

  getDeviceInfo = () => {
    const device = this.getDevice();
    const infoList: any[] = [];
    if (device) {
      const isIMEI = isNB(this.config) || isGPRS(this.config);
      const macLabel = isIMEI ? i18n.t('DEVICE_IMEI') : i18n.t('DEVICE_MAC');
      infoList.push({ title: `${macLabel}：${device.mac}` });
      const didLabel = `${i18n.t('DEVICE_ID')}：${device.id}`;
      infoList.push({ title: didLabel });

      if (this.state.hardVersion) {
        const hardVersionLabel = `${i18n.t('硬件版本号')}：${this.state.hardVersion}`;
        infoList.push({ title: hardVersionLabel });
      }
      if (this.state.softVersion) {
        const softVersionLabel = `${i18n.t('软件版本号')}：${this.state.softVersion}`;
        infoList.push({ title: softVersionLabel });
      }
    }
    return infoList;
  }

  render() {
    const styles = dstyles.style;
    const infoList = this.getDeviceInfo();

    return (
      <PageContainer title={i18n.t('DEVICE_INFO')}>
        <ScrollView style={styles.scroll}>
          {infoList.map((item: any) => {
            const { title } = item;
            return (
              <ListItem key={item.title} style={styles.item}>{title}</ListItem>
            );
          })}
        </ScrollView>
      </PageContainer >
    );
  }
}
